<template>
  <div class="cost-info-wrap">
    <div class="header-wrap">
      <Title title="成本信息"/>
      <span v-if="detailData && (detailData.costNote || detailData.costNote===0) " style="color: #999; font-size: 14px; font-weight: bold; margin-left: 12px;">（{{ detailData.costNote / 100 | moneyFilter }}）</span>
      <span v-else>（--）</span>
    </div>
    <el-form v-if="detailData && detailData.supplierAry && detailData.supplierAry.length > 0" class="cost-info-content">
      <div class="cost-info-ground">
        <div v-for="(item, index) in supplierAry" :key="index" class="cost-info-item">
          <span class="label">供应商：</span>
          <span style="min-width: 150px; display: inline-block;">{{ item.supplier || '--' }}</span>
        </div>
      </div>
      <div class="cost-info-ground" style="margin-left: 24px;">
        <div v-for="(item, index) in supplierTypeAry" :key="index" class="cost-info-item">
          <span class="label">类型：</span>
          <span>{{ item.supplierType | clientStatusFilter }}</span>
        </div>
      </div>
      <div class="cost-info-ground" style="margin-left: 34px;">
        <div v-for="(item, index) in costAry" :key="index" class="cost-info-item">
          <span v-if="item.way === 0" class="label">分成比例：</span>
          <span v-else class="label">成本金额：</span>
          <span v-if="item.way === 0">{{ item.costRate }} ( 已分成 {{ (item.costAmount || item.costAmount === 0) ? moneyFilter(item.costAmount / 100) : '--' }} )</span>
          <span v-else>{{ item.costAmount / 100 | moneyFilter }}</span>
        </div>
      </div>
    </el-form>
    <div v-else class="empty-container">
      <img src="../../../assets/empty-data-icon.png" alt="">
      <div class="empty-text">暂无成本信息</div>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { clientStatusFilter } from '@/filters/status';
import { moneyFilter } from '@/filters/number';
export default {
  name: 'CostInfo',
  components: { Title },
  filters: { clientStatusFilter, moneyFilter },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  computed: {
    supplierAry() {
      if (this.detailData && this.detailData.supplierAry) {
        const arr = this.detailData.supplierAry.map(item => {
          return { supplier: item.supplier };
        });
        return arr;
      } else {
        return [];
      }
    },
    supplierTypeAry() {
      if (this.detailData && this.detailData.supplierAry) {
        const arr = this.detailData.supplierAry.map(item => {
          return { supplierType: item.supplierType };
        });
        return arr;
      } else {
        return [];
      }
    },
    costAry() {
      if (this.detailData && this.detailData.supplierAry) {
        const arr = this.detailData.supplierAry.map(item => {
          return { way: item.way, costRate: item.costRate, costAmount: item.costAmount, orbedCost: item.orbedCost };
        });
        return arr;
      } else {
        return [];
      }
    }
  },
  methods: {
    moneyFilter
  }
};
</script>
<style lang="scss" scoped>
.cost-info-content{
  display: flex;
  padding-left: 12px;
}
.cost-info-item {
  line-height: 28px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  .label {
    color: #606266;
  }
}
.cost-info-wrap {
  .title-head {
    flex: unset !important;
  }
  .header-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
}
</style>
